<template>
    <el-dialog :title="'导入'+title" :visible.sync="dialogVisible" width="660px" @close="handleClose" v-loading='loading'
        element-loading-text="正在导入" element-loading-background="rgba(250, 250, 250, 0.1)"
        element-loading-spinner="el-icon-loading">
        <div class="step">
            <span>操作步骤:</span>
            <span>1.下载<el-button size="mini" type="text" @click='downLoad'>{{`《导入${title}模版》`}}</el-button></span>
            <span>2.打开下载表，将对应信息填入或粘贴进本表。为保证导入成功，请使用纯文本或数字。</span>
            <span>3.信息输入完毕并保存后，点击下方上传文件按钮选择已保存的excel文档。</span>
            <span>4. 点击开始导入</span>
        </div>
        <div class='upload'>
            <el-upload action="" :file-list='fileList' :on-change='fileChange' accept='.xlsx' :disabled="fileList.length != 0"
                :auto-upload='false' :before-upload="beforeAvatarUpload" :limit="1">
                <el-button size="mini" type="primary" icon='el-icon-upload2' :disabled="fileList.length != 0">上传文件</el-button>
                <span slot="tip" style='margin-left:12px;color:rgb(155, 155, 155)'>附件支持类型：XLSX，最大不能超过10M</span>
            </el-upload>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="importStart" size="mini" type="primary" :disabled='fileList.length == 0'>开始导入</el-button>
            <el-checkbox v-model="checked" style="margin-left:20px" v-show="payload.isCover">覆盖导入</el-checkbox>
        </span>
    </el-dialog>
</template>

<script>
    import fileDownload from "js-file-download";
    import request from '@/utils/request'
    import {
        importModel
    } from '@/api/baseController'
    export default {
        data() {
            return {
                dialogVisible: false,
                checked: false,
                fileList: [],
                disabled: false,
                payload: '',
                loading: false,
            }
        },
        props: {
            title: {
                type: String,
                default: ''
            },
            urlData: {
                type: Object,
                default: () => {}
            }
        },
        methods: {
            getUrl(data) {
                return request({
                    url: this.payload.importUrl,
                    method: 'post',
                    data,
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                })
            },
            //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
            fileChange(files, fileList) {
                this.fileList = fileList
            },
            openDialog(data) {
                this.payload = data
                this.dialogVisible = true
            },
            handleClose() {
                this.fileList = []
            },
            //上传文件之前的钩子
            beforeAvatarUpload(file) {
                // 文件大小限制为10M
                const fileLimit = file.size / 1024 / 1024 < 10
                if (!fileLimit) {
                    this.utils.showMsg('上传文件大小不超过10M!', 'waring')
                }
                return fileLimit;
            },
            // 开始导入
            importStart() {
                this.loading = true
                const formData = new FormData() 
                formData.append('file', this.fileList[0].raw)
                formData.append('type', Number(this.checked))
                if (this.payload.moduleType) formData.append('moduleType', this.payload.moduleType)
                if (this.payload.groupId) formData.append('groupId', this.payload.groupId)
                this.getUrl(formData).then(res => {
                    if (res.code == 200) {
                        if (this.payload.page == 'fromStock') {
                            if (res.data.errNum == 0 || !Object.keys(res.data).length) this.utils.showMsg(
                                '导入成功!', 'success')
                        } else {
                            this.utils.showMsg(res.data ? res.data : res.message, 'success')
                        }
                        this.$emit('importSuccess', res.data)
                        this.dialogVisible = false
                    }
                    this.loading = false
                })
            },
            // 下载模版
            downLoad() {
                importModel({
                    type: this.payload.type
                }).then(res => {
                    let tit = (res.contentHeaders['content-disposition'].split(';'))[1].replace(' filename=',
                        '')
                    fileDownload(res, decodeURIComponent(tit),
                        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8')
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .step {
        span {
            display: inline-block;
            width: 100%;
            height: 22px;
            line-height: 22px;
        }

        span:nth-child(2) {
            margin-bottom: 2px;
        }
    }

    /deep/ .el-dialog__body {
        padding: 10px 30px 10px 30px !important;
    }

    .upload {
        margin-top: 20px;
    }

    /deep/ .el-dialog__footer {
        text-align: center;
    }
</style>